<template>
  <div class="home" ref="box">
  都发大水发射点
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill';

export default {
  name: 'Home',
  mounted() {
    const robserver = new ResizeObserver((entries) => {
      console.log(entries);
      // eslint-disable-next-line no-restricted-syntax
      for (const entry of entries) {
        const {
          left, top, width, height,
        } = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${width}px x ${height}px`);
        console.log(`Element's paddings: ${top}px ; ${left}px`);
      }
    });
    robserver.observe(this.$refs.box);
  },
};
</script>
